<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var ball = { x: 250, y: 250, r: 10, vx: 5, vy: -5 };
            var paddle = { x: 200, y: 480, w: 100, h: 10 };
            
            function render() {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制球和挡板
                ctx.beginPath();
                ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
                ctx.beginPath();
                ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }
            
            function update() {
                // 更新球的位置
                ball.x += ball.vx;
                ball.y += ball.vy;
                if (ball.x + ball.r > canvas.width || ball.x - ball.r < 0) {
                ball.vx = -ball.vx;
                }
                if (ball.y - ball.r < 0) {
                ball.vy = -ball.vy;
                } else if (ball.y + ball.r > canvas.height - paddle.h) {
                if (ball.x > paddle.x && ball.x < paddle.x + paddle.w) {
                    ball.vy = -ball.vy;
                } else {
                    alert("Game over!");
                    clearInterval(intervalId);
                }
                }
                
                // 更新挡板的位置
                if (rightPressed && paddle.x < canvas.width - paddle.w){
                    paddle.x += 7;
                }
                else if (leftPressed && paddle.x > 0) {
                    paddle.x -= 7;
                }
                }

                // 定时更新画面
                var intervalId = setInterval(function() {
                    render();
                    update();
                }, 10);
            </script>
        <script>
                // 4. 数据存储
                // 游戏数据可以使用IndexDB进行本地存储。IndexDB是一种浏览器内置的数据库，可以存储大量数据，并且支持离线使用。以下是一个简单的IndexDB存储示例：
                // ```javascript
                // 打开或创建一个名为"mydb"的数据库
                var request = window.indexedDB.open("mydb", 1);

                // 数据库打开或创建成功
                request.onsuccess = function(event) {
                var db = event.target.result;
                
                // 在数据库中创建一个名为"highScores"的对象存储区
                var objectStore = db.createObjectStore("highScores", { keyPath: "name" });
                
                // 向对象存储区中添加一条记录
                var score = { name: "Alice", score: 100 };
                var request = objectStore.add(score);
                
                // 添加记录成功后，从对象存储区中获取所有记录
                request.onsuccess = function(event) {
                    var objectStore = db.transaction("highScores").objectStore("highScores");
                    objectStore.getAll().onsuccess = function(event) {
                    console.log(event.target.result);
                    };
                };
                };

                // 数据库打开或创建失败
                request.onerror = function(event) {
                console.log("Database error: " + event.target.errorCode);
                };

            </script>
        <script>
                var rightPressed = false;
                var leftPressed = false;

                document.addEventListener("keydown", function(event) {
                if (event.key == "ArrowRight") {
                    rightPressed = true;
                } else if (event.key == "ArrowLeft") {
                    leftPressed = true;
                }
                });

                document.addEventListener("keyup", function(event) {
                if (event.key == "ArrowRight") {
                    rightPressed = false;
                } else if (event.key == "ArrowLeft") {
                    leftPressed = false;
                }
                });

            </script>
    </body>
</html>